<template>
  <XLayoutMain>
    <div class="g-content pb-0">
      <x-form ref="formRef" v-model:model="form" inline label-placement="left">
        <n-grid cols="1 s:1 m:2 l:3 xl:4 2xl:4" responsive="screen" x-gap="20">
          <n-form-item-gi label="上传时间" path="dateRange">
            <n-date-picker
              v-model:formatted-value="form.dateRange"
              type="daterange"
              value-format="yyyy-MM-dd"
              clearable
              @update:value="handleSubmit"
            />
          </n-form-item-gi>

          <n-form-item-gi label="子账户ID" path="accountCode">
            <n-input
              v-model:value="form.accountCode"
              clearable
              placeholder="请输入查询内容"
              @keyup.enter="handleSubmit"
            />
          </n-form-item-gi>

          <n-form-item-gi label="账户名称" path="companyName">
            <n-input
              v-model:value="form.companyName"
              clearable
              placeholder="请输入查询内容"
              @keyup.enter="handleSubmit"
            />
          </n-form-item-gi>
          <n-form-item-gi label="提交人员" path="creatorId">
            <n-select
              v-model:value="form.creatorId"
              :options="accountList"
              label-field="accountName"
              value-field="accountId"
              filterable
              clearable
              placeholder="搜索或选择人员"
            />
          </n-form-item-gi>
          <n-form-item-gi>
            <x-button type="primary" @click="handleSubmit"> 查询 </x-button>
            <x-button @click="handleReset"> 重置 </x-button>
          </n-form-item-gi>
        </n-grid>
      </x-form>
    </div>

    <div class="g-content">
      <x-data-table
        ref="tableRef"
        v-model:immediate="immediate"
        :params="paginationParams"
        :columns="columns"
        :row-key="(row) => row.id"
      />
    </div>
  </XLayoutMain>
</template>

<script lang="ts">
  export default {
    name: 'IntelUploadManage'
  }
</script>

<script setup lang="ts">
  import { XLayoutMain, XForm, XDataTable, XButton } from '@/components'
  import { NGrid, NFormItemGi, NInput, NButton, NSpace, NDatePicker, NText, NSelect } from 'naive-ui'
  import { useStore } from '@/store'
  import { useRoute, useRouter } from 'vue-router'
  import { computed, ref, h, VNode, onMounted } from 'vue'
  import { useActivated } from '@/hooks'

  const store = useStore()
  const router = useRouter()
  const route = useRoute()
  const accountList = ref([])
  const formRef = ref(null)
  const tableRef = ref(null)
  const form = ref({
    accountCode: route.query.accountCode || '',
    companyName: null,
    creatorId: null,
    dateRange: null
  })
  const immediate = ref(true)
  const paginationParams = computed(() => {
    return {
      actions: 'intelligent/adgroupRecordInfo',
      data: {
        ...form.value,
        dateRange: null,
        startDate: form.value.dateRange?.[0],
        endDate: form.value.dateRange?.[1]
      }
    }
  })
  const columns = ref([
    {
      key: 'id',
      title: '批次ID'
    },
    {
      key: 'createdAt',
      title: '上传提交时间'
    },
    {
      key: 'accountCode',
      title: '子账户ID'
    },
    {
      key: 'accountName',
      title: '账户名称'
    },
    {
      key: 'creatorName',
      title: '提交人员'
    },
    {
      key: 'couponScene',
      title: '上传成功/失败/总数',
      render(row: any): VNode {
        return h(NSpace, { size: 4 }, () => [
          h(NText, { type: 'success' }, () => row.successfulCount || 0),
          h(NText, { depth: 3 }, () => '/'),
          h(NText, { type: 'error' }, () => row.failedCount || 0),
          h(NText, { depth: 3 }, () => '/'),
          h(NText, {}, () => row.totalCount || 0)
        ])
      }
    },
    {
      key: 'action',
      title: '操作',
      width: 200,
      fixed: 'right',
      render(row: any): VNode {
        return h(NButton, { type: 'primary', text: true, onClick: () => handleDetail(row) }, () => '查看明细')
      }
    }
  ])

  onMounted(() => {
    getAccountList()
  })

  useActivated(() => {
    handleRefresh()
  })

  // 获取提交人员
  async function getAccountList() {
    const { data } = await store.dispatch('system/accountList', {
      pageSize: 10000
    })
    accountList.value = data
  }

  function handleSubmit() {
    immediate.value = true
  }

  function handleRefresh() {
    tableRef.value.reload()
  }

  function handleReset() {
    formRef.value.resetFields()
    form.value.accountCode = ''
    handleSubmit()
  }

  function handleDetail(row: any) {
    router.push({
      name: 'IntelUploadDetail',
      query: {
        id: row.id,
        customerName: row.accountName,
        submitTime: row.createdAt,
        accountCode: row.accountCode,
        batchId: row.batchId
      }
    })
  }
</script>

<style scoped lang="scss"></style>
